<form id='frmLogin'>
	<label for='username'>Username:</label>
	<input type='text' id='username' name='username'><br>
	<label for='password'>Password:</label>
	<input type='text' id='password' name='password'><br><br>
	<input type='submit' value='Sign In' id='submit'>
</form>
<script type="text/javascript" src='js/prototype.js'></script>
<script type="text/javascript">
	$('submit').observe('click', login);
	
	function login(e){
		Event.stop(e);

		var url = 'ajax/login.php';

		new Ajax.Request(url, {
			method: 'post',
			parameters: {
				username: document.getElementById('username').value,
				password: document.getElementById('password').value
			},
			onSuccess: process,
			onFailure: function(){
				alert('There was an error with the connection');
			}
		});
	}

	function process(transport){
		var res = transport.responseText;

		if (res == 'proceed') {
			$('frmLogin').hide();

			var result = document.createElement('div');
			result.appendChild(document.createTextNode("You are logged in!"));

			document.body.appendChild(result);
		}else{
			alert("Sorry, your username and password don't match");
		}

	}
</script>